<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using the Render Stack</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
	.yui-skin-sam .yui-calendar td.sunday { background-color:#999; }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Using the Render Stack</h1>

<div class="exampleIntro">
	<p>Calendar employs a feature called the <em>Render Stack</em> to allow you to customize the way that certain date cells are rendered on the Calendar. The Render Stack consists of a collection of functions that can be executed when rendering certain dates. When the Calendar is rendered, each function in the Render Stack is executed for each applicable date. This functionality allows developers implementing the Calendar to alter the contents of date cells based on a set of rules.</p>
<p>This example shows you how to use any one of the built-in renderers provided with the Calendar, or write your own.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="cal1Container"></div>

<script type="text/javascript">
	YAHOO.namespace("example.calendar");

	YAHOO.example.calendar.init = function() {
		YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", 
																	 { pagedate:"2/2008" } );

		YAHOO.example.calendar.cal1.addRenderer("2/29", YAHOO.example.calendar.cal1.renderBodyCellRestricted);
		YAHOO.example.calendar.cal1.addRenderer("2/1/2008-2/7/2008", YAHOO.example.calendar.cal1.renderCellStyleHighlight1);

		var myCustomRenderer = function(workingDate, cell) {
			cell.innerHTML = "X";
			YAHOO.util.Dom.addClass(cell, "sunday");
			return YAHOO.widget.Calendar.STOP_RENDER;
		}
		YAHOO.example.calendar.cal1.addWeekdayRenderer(1, myCustomRenderer);

		YAHOO.example.calendar.cal1.render();
	}

	YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>

<div style="clear:both" ></div>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
